<template>
  <div class="illegalHome">
    <div class="illegalHeader">
      <x-header :title="title" :left-options="{backText:''}" class="redHeader">
        <img src="../../assets/image/illegal/add.png" alt="" slot='right' class="add" @click='addCar'>
      </x-header>
      <div class="carMess">
        <swiper dots-position="center" @on-index-change="onSwiperItemIndexChange" v-model="swiperItemIndex">
          <swiper-item class="swiper-demo-img" v-for="(item,index) in allCarMess" :key="index">
            <div class="allMess">
              <h1>{{item.SET}} {{item.MODEL}}</h1>
              <div class="carItem">
                <div class="items" @click='editCar(item)'>
                  <img :src="publicLogo+item.SICON" alt='' class="carLogo">
                  <img src="../../assets/image/illegal/edit.png" alt="" class="edit" />
                </div>

              </div>
            </div>
          </swiper-item>
        </swiper>
        <div class="illegalMess">
          <div class="point">
            <h1>{{illegalMess.TOTAL_FEN||0}}</h1>
            <p>扣分</p>
          </div>
          <div class="borderR"></div>
          <div class="money">
            <h1>{{illegalMess.TOTAL_MONEY||0}}</h1>
            <p>罚款</p>
          </div>
          <div class="borderR"></div>
          <div class="handle">
            <h1>{{illegalMess.ILLEGAL_UNTIMES||0}}</h1>
            <p>未处理</p>
          </div>
        </div>
      </div>
    </div>
    <div class="illegalMain">
      <div class="noIllegal" v-if='lengths==0&&!carMessError'>
        <img src="../../assets/image/illegal/noIllegal.png" alt="">
        <h1>恭喜你！</h1>
        <p class="toServerp">您目前没有违章记录</p>
        <!-- <div class="toServer" @click="toServerChat">
          <img src="../../assets/image/customer/serverWhite.png" alt="">
          <p>客服帮助</p>
        </div> -->
      </div>
      <div class="carMesserror" v-if='carMessError'>
        <img src="../../assets/image/illegal/noIllegal.png" alt="">
        <h2>您的发动机或车架号<br/>未填写</h2>
        <div class="btns" @click='finishCarMess'>去完善</div>
      </div>
      <div class="allIllegal" v-if='lengths>0'>
        <div class="illegalItem" v-for='(item,index) in illegalMess.RESULT_DATA' :key="index">
          <div class="itemsHead">
            <p class="time">{{item.CREATE_TIME | filterTimess}}</p>
            <p v-if='item.HANDLED!=1'><img src="../../assets/image/illegal/nohandle.png" alt="">未处理</p>
            <p v-if='item.HANDLED==1' class="handle"><img src="../../assets/image/illegal/handle.png" alt="">已处理</p>
          </div>
          <h1>{{item.SAREA}}</h1>
          <p>{{item.SACT}}</p>
          <div class="itemsFooter">
            <div class="itemFL">
              <span>扣 <em>{{item.FEN}}分</em></span>
              <span>罚款 <em>{{item.ILLEGAL_FEE}}元</em></span>
            </div>
            <div class="handleIllegal" v-if='item.DEAL_FLAG==1&&item.PAY_STATUS==0' @click='handleIllegal(item)'>去缴费</div>
          </div>
        </div>
      </div>
      <div class="relativeIllegal" v-if='lengths>0'>
        <p>
          <img src="../../assets/image/illegal/question.png">
          <span>存在扣分的违章暂不支付线上代缴</span>
        </p>
        <h2>对违章记录有疑问？</h2>
        <div class="feedBack" @click='$router.push("/feedback")'>反馈</div>
      </div>
    </div>
    <toast v-model="showNoIllegal" type="text" text="服务器错误" position='center'></toast>
  </div>
</template>
<script>
/*违章查询*/
import {XHeader,Swiper, SwiperItem,Toast} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"illegalHome",
  // 数据
  data(){

    return{
    	userId:'',
      title:'',
      allCarMess:'', //所有车辆信息
      swiperItemIndex:0,
      illegalMess:0, //违章信息
      lengths:'', //违章数
      publicLogo:'',
      showNoIllegal:false,
      carMessError:false  //判断车辆信息是否完善
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    localStorage.setItem('from','illegal');
    if(!this.userId){//判断是否登录
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
      return;
    }
    //获取用户所有车辆
    this.$fetchPost('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
          let arr=res.CARS.filter(function(item){
            return item.CAR_NUMBER!="未设置";
          })
          if(arr.length==0){
            let that=this;
            this.$vux.confirm.show({
              title:'提示',
              content:'请先添加车辆',
              // 组件除show外的属性
              onConfirm () {
                that.addCar();
              }
            })
          }

          this.allCarMess=arr;
          this.publicLogo=res.CAR_LOGO_URL;
          //this.title=this.allCarMess[0].LICENCE;
          for(let i=0;i<this.allCarMess.length;i++){
            if(this.allCarMess[i].IS_DEFAULT_CAR == 1){//默认车辆
              this.title = this.allCarMess[i].LICENCE;
              this.swiperItemIndex=i;
            }
          }
          if(localStorage.getItem('illegalSearch')){
              let obj=JSON.parse(localStorage.getItem('illegalSearch'));
              for(let i=0;i<this.allCarMess.length;i++){
                if(this.allCarMess[i].IS_DEFAULT_CAR == 1){
                  this.swiperItemIndex=i;
                }
              }
          }

          this.getIllegalMess(this.swiperItemIndex);
        }else if(res.STATUS_CODE==0){
          this.showNoIllegal=true;
        }
      },err=>{
        console.log(err);
      })
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    //获取违章信息
    getIllegalMess(index){
      if(localStorage.getItem('illegalSearch')){
        let obj=JSON.parse(localStorage.getItem('illegalSearch'));
        this.illegalMess=obj;
        this.lengths=obj.RESULT_DATA.length;
        localStorage.removeItem('illegalSearch');
      }else{
        this.lengths=0;
        let selectCar=this.allCarMess[index];
        let obj={};
        if(selectCar.VIN==''||selectCar.ENGINE_NUMBER==''){//车辆信息不完善
          this.carMessError=true;
          return;
        }
        this.$vux.loading.show({
         text: ''
        });
        obj.USER_ID=this.userId;
        //obj.SCAR_NUMBER=selectCar.LICENCE;
        obj.SCAR_NUMBER=this.title;
        obj.FRAME_NO=selectCar.VIN;
        obj.ENG_NO=selectCar.ENGINE_NUMBER;
        //this.title=selectCar.LICENCE;
        this.$fetchPost('/IllegalBaoWeb/allIllegal.action',obj).then(res=>{
            this.$vux.loading.hide();
            if(res.STATUS_CODE==1){
              this.illegalMess=res;
              this.lengths=res.RESULT_DATA.length;
            }
        },err=>{
          console.log(err);
        })
      }
    },
    onSwiperItemIndexChange(index){
      //this.title=this.allCarMess[index].LICENCE;
      for(let i=0;i<this.allCarMess.length;i++){
        if(this.allCarMess[i].IS_DEFAULT_CAR == 1){//默认车辆
          this.title = this.allCarMess[i].LICENCE;
        }
      }
      this.getIllegalMess(index);
    },
    //违章添加车辆
    addCar(){
      localStorage.setItem("addCar",JSON.stringify({}));
      localStorage.removeItem('editCar');
      this.$router.push('/addCar');
    },
    //去完善车辆信息
    finishCarMess(){
      let obj=this.allCarMess[this.swiperItemIndex];
      this.editCar(obj);
    },
    // 编辑车辆信息
    editCar(item){
      let obj={};
      for(let i=0;i<this.allCarMess.length;i++){
        if(this.allCarMess[i].IS_DEFAULT_CAR == 1){//默认车辆
          obj.VIN=this.allCarMess[i].VIN;
          obj.ENGINE_NUM=this.allCarMess[i].ENGINE_NUM;
          obj.LICENCE=this.allCarMess[i].LICENCE;
          obj.BRAND=this.allCarMess[i].BRAND;
          obj.SET=this.allCarMess[i].SET;
          obj.MODEL=this.allCarMess[i].MODEL;
          obj.SICON=this.allCarMess[i].SICON;
          obj.CAR_ID=this.allCarMess[i].CAR_ID;
          obj.MILE=this.allCarMess[i].MILE;
        }
      }
       // obj.VIN=item.VIN;
       // obj.ENGINE_NUM=item.ENGINE_NUM;
       // obj.LICENCE=item.LICENCE
       // obj.BRAND=item.BRAND;
       // obj.SET=item.SET;
       // obj.MODEL=item.MODEL;
       // obj.SICON=item.SICON;
       // obj.SICON=item.SICON;
       // obj.CAR_ID=item.CAR_ID;
       // obj.MILE=item.LEFT_MILE;
       localStorage.removeItem("addCar");
       localStorage.setItem("editCar",JSON.stringify(obj));
       this.$router.push('/updateCar');
    },
    //处理违章缴费
    handleIllegal(item){
      //保存
      item.IS_OBD=this.allCarMess[this.swiperItemIndex].IS_OBD;
      item.CAR_BRAND_NAME=this.allCarMess[this.swiperItemIndex].BRAND+'_'+this.allCarMess[this.swiperItemIndex].MODEL+'_'+this.allCarMess[this.swiperItemIndex].SET;
      item.CAR_INFO_ID=this.allCarMess[this.swiperItemIndex].CAR_ID;
      sessionStorage.setItem('illegalMess',JSON.stringify(item));
      this.$router.push('/illegalPay');
    },
    // 客服帮助
    toServerChat(){
      this.$router.push('/customerService')
    }
  },
  // 子组件
  components:{
    XHeader,
    Swiper,
    SwiperItem,
    Toast
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>

.illegalHome{
  width: 7.5rem;
  min-height: 100%;
  background: #eaeaea;
  .illegalHeader{
    position: fixed;
    width: 7.5rem;
    height: 4.3rem;
    top: 0;
    left: 0;
    .vux-header{
      .vux-header-title{
        span{
          color: #fff!important;
          font-size: 0.31rem!important;
        }
      }
    }
  }
  .illegalMain{
    padding-top: 4.3rem;
  }
  .relativeIllegal{
    margin-top: 0.5rem;
    text-align: center;
    padding-bottom: 0.4rem;
    p{
      margin-bottom: 0.1rem;
      display: flex;
      justify-content:center;
      align-items: center;
      img{
        width: 0.25rem;
        height: 0.25rem;
        margin-right: 0.1rem;
      }
      span{
        font-size:0.23rem;
        color: #666;
      }
    }
    h2{
      font-size: 0.2rem;
      color: #f54d48;
      margin-bottom: 0.1rem;
    }
    .feedBack{
      font-size: 0.3rem;
      background: #db2531;
      width: 2.7rem;
      height: 0.9rem;
      line-height: 0.9rem;
      text-align: center;
      margin: 0 auto;
      color: #fff;
      border-radius: 0.5rem;
    }
  }
  .illegalItem{
    background: #fff;
    margin-top: 0.3rem;
    padding-bottom: 0.2rem;
    .itemsHead{
      display: flex;
      padding: 0 0.2rem;
      justify-content: space-between;
      p{
        font-size: 0.22rem;
        color:#ff0000;
        padding: 0.4rem 0 0.3rem 0;
        img{
          width:0.32rem;
          height:0.32rem;
          margin-right: 0.2rem;
          vertical-align: middle;
        }
      }
      .handle{
        color: #5fc6e9;
      }
      .time{
        font-size: 0.22rem;
        color:#979797;
        padding: 0.42rem 0 0.38rem 0;
      }
    }
    h1{
      font-size: 0.3rem;
      color: #333;
      text-align: left;
      font-weight: bold;
      padding-left: 0.2rem;
      margin:0 0 0.3rem 0;
    }
    p{
      font-size: 0.24rem;
      padding:0 0.2rem;
      color: #a5a5a5;
      text-align: left;
    }
    .itemsFooter{
      display: flex;
      padding: 0 0.2rem;
      justify-content: space-between;
      margin-top: 0.1rem;
      .itemFL{
        line-height: 0.3rem;
        span{
          font-size: 0.22rem;
        }
        em{
          color: #da2531;
          font-size: 0.25rem;
          font-style: normal;
        }
      }
      .handleIllegal{
        font-size: 0.26rem;
        height: 0.64rem;
        line-height: 0.44rem;
        padding: 0.1rem 0.25rem;
        border-radius: 0.3rem;
        border:1px solid #da2531;
        margin-top: 0.1rem;
        color: #da2531;
      }
    }
  }
  .add{
    width: 0.37rem;
    height: 0.37rem;
  }
  .carMess{
    background: #e42e3b;
    .allMess{
      height: 2rem;
    h1{
      font-size: 0.2rem;
      color: #fff;
      padding-bottom: 0.1rem;
    }
    .carItem{
      height: 1.6rem;
      .items{
        display: flex;
        justify-content: center;
        .carLogo{
          width: 1rem;
          height: 1rem;
          background: #fff;
          border-radius: 1rem;
        }
        .edit{
          width: 0.22rem;
          height: 0.22rem;
          margin-top: 0.8rem;
          margin-left: 0.1rem;
        }
      }
     }
    }
    .illegalMess{
      display: flex;
      justify-content: space-around;
      padding-bottom: 0.2rem;
      align-items: center;
    }
    .borderR{
      width: 1px;
      background: #fff;
      height: 0.8rem;
    }
    .handle,.point,.money{
      width: 1.3rem;
      height: 1.3rem;
      color:#fff;
      border:1px solid #fff;
      border-radius: 1.3rem;
      h1{
        font-size: 0.35rem;
        line-height: 0.5rem;
        margin-top: 0.2rem;
      }
      p{
        line-height: 0.5rem;
        font-size: 0.22rem;
      }
    }
  }
  .noIllegal{
    .toServer{
      background: #db2531;
      width: 2.7rem;
      height: 0.7rem;
      line-height: 0.9rem;
      text-align: center;
      margin: 0 auto;
      color: #fff;
      margin-top: 1rem;
      border-radius: 0.5rem;
      display: flex;
      img{
        margin: 0.1rem 0.2rem 0.1rem 0.4rem;
        width: 0.5rem;
        height: 0.5rem;
      }
      p{
        font-size: 0.28rem;
        text-align: center;
        line-height: 0.7rem;
      }
    }
  }
  .noIllegal,.carMesserror{
    text-align: center;
    img{
      display: block;
      width: 2.88rem;
      height: 2.8rem;
      margin:2rem auto 0;
    }
    h1{
      font-size: 0.26rem;
      padding:0.2rem 0 0.1rem 0;
      color:#f23030;
      font-weight: 500;
    }
    .toServerp{
      font-size: 0.22rem;
      color:#ccc;
    }
    h2{
      font-size: 0.3rem;
      color: #666;
      margin: 0.3rem 0;
      line-height: 1.5;
    }
    .btns{
      font-size: 0.3rem;
      background: #db2531;
      width: 2.7rem;
      height: 0.9rem;
      line-height: 0.9rem;
      text-align: center;
      margin: 0 auto;
      color: #fff;
      border-radius: 0.5rem;
    }
  }
}
</style>
